<template>
	<Layout>
		<Form ref="form1" :model="dataToQuery" :label-width="90">
			<Row class="query-form">
				<Col span="8">
						<FormItem label="二级集团:">
								<two-level-org org-code class="query-form-el" v-model="dataToQuery.twoLevelOrgCode" />
						</FormItem>
				</Col>
				<Col span="8">
				<FormItem label="所属单位：">
					<company-select v-model="dataToQuery.companyName" style="width:100%" />
					<!-- <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgname='setQueryOrgName'
						:orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}">
					</cascader-dom> -->
				</FormItem>
				</Col>
				<Col span="8" v-if="!switchFlag">
				<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
				<Button @click="reset" class="ivu-btn-reset">重置</Button>
				<Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
				<Col span="8" v-else>
				<FormItem label="相关方名称：" prop="contractorName" :label-width="100">
					<Input type="text" v-model="dataToQuery.contractorName" />
				</FormItem>
				</Col>
				<Col span="2">
				<!-- <Button class="ivu-btn-reset" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
				</Col>
			</Row>
			<Row v-show="switchFlag" class="query-form">
				<Col span="8">
				<FormItem label="检查时间：">
					<DatePicker class="query-form-el" v-model="dataToQuery.inspectionRange" format="yyyy-MM-dd"
						type="daterange" placement="bottom-start"
						@on-change="(date) => onSelectFieldQueryDateRange(date, 'inspectionDate')" style="width: 100%;">
					</DatePicker>
				</FormItem>
				</Col>
				<Col span="8" offset="8">
							<Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
							<Button @click="reset" class="ivu-btn-reset">重置</Button>
							<Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
					</Col>
			</Row>
		</Form>
		<Row :gutter="24">
			<Col span=6>
			<Card class="statistics-card" id="statistics-card-1">
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<span>历史作业数量</span>
					</Col>
					<Col span="8" class="statistics-text-content">
					<span>{{ dataMap.historyWorkSum }}</span>
					</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<!-- @click.prevent="notNumSubmit" -->
					<span>正在作业数量</span>
					</Col>
					<Col span="8" class="statistics-text-content">
					<span>{{ dataMap.workSum }}</span>
					</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<Progress :percent="dataMap.workPercent" :stroke-width="5" :hide-info="true"></Progress>
					</Col>
					<Col span="8" class="statistics-text-content" style="font-size: 14px">
					<!--<span>{{ dataMap.workPercent }}%</span>-->
					</Col>
				</Row>
			</Card>
			</Col>
			<Col span=6>
			<Card class="statistics-card" id="statistics-card-2">
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<span>问题数量</span>
					</Col>
					<Col span="8" class="statistics-text-content">
					<span>{{ dataMap.checkProblemNum }}</span>
					</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<span>整改数量</span>
					</Col>
					<Col span="8" class="statistics-text-content">
					<span>{{ dataMap.rectificationNum }}</span>
					</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<Progress :percent="dataMap.problemPercent" :stroke-width="5" :hide-info="true"></Progress>
					</Col>
					<Col span="8" class="statistics-text-content" style="font-size: 14px">
					<span>{{ dataMap.problemPercent }}%</span>
					</Col>
				</Row>
			</Card>
			</Col>
			<Col span="6">
			<Card class="statistics-card" id="statistics-card-3">
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<span>评价优秀次数</span>
					</Col>
					<Col span="8" class="statistics-text-content">
					<span>{{ dataMap.youNum }}</span>
					</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg" style="height: 27px;">
					<Col span="15" class="statistics-text-title">
					<span>评价不及格次数</span>
					</Col>
					<Col span="8" class="statistics-text-content">
					<span>{{ dataMap.nojigeNum }}</span>
					</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<Progress :percent="dataMap.evaluationPercent" :stroke-width="5" :hide-info="true"></Progress>
					</Col>
					<Col span="8" class="statistics-text-content" style="font-size: 14px">
					<!--<span>{{ dataMap.evaluationPercent }}%</span>-->
					</Col>
				</Row>
			</Card>
			</Col>
			<Col span="6">
			<Card class="statistics-card" id="statistics-card-4">
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<span@click.prevent="notCompleted3Method">培训次数</span>
						</Col>
						<Col span="8" class="statistics-text-content">
						<span@click.prevent="notCompleted3Method">{{ dataMap.trainingNum }}</span>
							</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg" style="height: 27px;">
					<Col span="15" class="statistics-text-title">

					</Col>
					<Col span="8" class="statistics-text-content">

					</Col>
				</Row>
				<Row type="flex" justify="space-between" class="code-row-bg">
					<Col span="15" class="statistics-text-title">
					<Progress :percent="dataMap.trainingPercent" :stroke-width="5" :hide-info="true"></Progress>
					</Col>
					<Col span="8" class="statistics-text-content" style="font-size: 14px">
					<!--<span>{{ dataMap.trainingPercent }}%</span>-->
					</Col>
				</Row>
			</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 15px">
			<Col span="12">
			<Card dis-hover>
				<div ref="echart1" :style="{height: '290px'}"></div>
			</Card>
			</Col>
			<Col span="12">
			<Card dis-hover>
				<div slot="title">
					<Row>
						<Col span="6" style="width: 128px">作业次数最多相关方</Col>
						<Col span="12">
						<Divider type="vertical" />{{dataMap.maxWorkName}}</Col>
						<Col span="3" style="width: 74px">
						<Divider type="vertical" />作业次数</Col>
						<Col span="2" style="width: 35px">
						<Divider type="vertical" />{{dataMap.maxWorkNum}}</Col>
						<div style="height: 8px">
							<Divider />
						</div>
						<Col span="6" style="width: 128px">发现问题最多相关方</Col>
						<Col span="12">
						<Divider type="vertical" />{{dataMap.maxProblemWook}}</Col>
						<Col span="3" style="width: 74px">
						<Divider type="vertical" />发现问题</Col>
						<Col span="2" style="width: 35px">
						<Divider type="vertical" />{{dataMap.maxProblemWookNum}}</Col>
					</Row>
				</div>
				<div ref="echart2" :style="{height: '200px'}"></div>
			</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 15px">
			<Col span="12">
			<Card dis-hover>
				<div ref="echart3" :style="{height: '290px'}"></div>
			</Card>
			</Col>
			<Col span="12">
			<Card dis-hover>
				<div ref="echart4" :style="{height: '290px'}"></div>
			</Card>
			</Col>
		</Row>
		<!-- <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!"
           :loading='pageStatus.loading' border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col> -->
		</Row>
		<Modal :title="modalTitle" :transfer=false v-model="modelVisible" :width=1000 footer-hide>
			<Table v-if='partiesBookVisible' :loading="pagedata1.loading" size="small" class="table" :height=450
				no-data-text="没有查询到相关数据!" highlight-row stripe border :columns="partiesBookColumns" width="100%"
				:data="partiesBookInfo" />
			<Table v-if='evaluationPerfVisible' :loading="pagedata1.loading" size="small" class="table" :height=450
				no-data-text="没有查询到相关数据!" highlight-row stripe border :columns="evaluationPerfColumns" width="100%"
				:data="evaluationPerfInfo">
			</Table>
			<Page :total="pagedata1.total" :current="pagedata1.fromPage" :pageSize="pagedata1.pageSize"
				@on-change="pageChange1" @on-page-size-change='pageSizeChange1' show-total show-sizer show-elevator />
		</Modal>
	</Layout>
</template>

<script>
	import echarts from "echarts";
	import {
		Api
	} from '@/api/index.js'
	import pageCommonFunction from '@/components/pageCommonFunction.js'
	import {
		sessionStorage
	} from '@/common/cacheUtils.js';

	var cascaderDom = () => import('@/components/cascader-dom.vue');

	export default {
		components: {
			cascaderDom
		},
		data() {
			return {
				...this.createCommonDataField(),
				companyId: sessionStorage('userId').getObject('userId').companyId,
				// columns1: [
				//     {title: '序号', width: 65, align: 'center', render: this.indexColumnsRender},
				//     {minWidth: 150, title: '所属单位', align: 'center', key: 'companyName',},
				//     {minWidth: 150, title: '相关方名称', align: 'center', key: 'contractorName',},
				//     {minWidth: 120, title: '类别', align: 'center', key: 'categoryName',},
				//     {minWidth: 100, title: '合作期限', align: 'center', key: 'cooperationTerm',},
				//     {minWidth: 110, title: '法定代表人', align: 'center', key: 'legalPerson',},
				// ],
				dataMap: {},
				tableHeight: 10,
				// api
				queryUrl: Api.contractorStatistics + '/new',
				exportUrl: Api.contractorStatistics + '/export',

				currentUser: JSON.parse(sessionStorage('userId').get('userId')),

				pagedata1: {
					total: 0,
					pageSize: 10,
					currentPage: 1,
					// pageSizeArray: [10, 20, 50],
				},
				echartsName: '',
				modelVisible: false,
				modalTitle: '',
				partiesBookVisible: false,
				partiesBookInfo: [],
				partiesBookColumns: [{
						title: '序号',
						width: 65,
						fixed: 'left',
						align: 'center',
					 render: (h, params) => {
							return h('span', params.index + (this.pagedata1.currentPage - 1) * this.pagedata1
								.pageSize + 1);
						}
					},
					{
						key: 'companyName',
						title: '单位名称',
						align: 'center',
						minWidth: 180,
					},
					{
						key: 'relatedPartiesName',
						title: '相关方名称',
						align: 'center',
						minWidth: 180,
					},
					{
						key: 'ifConcreteClean',
						title: '是否清库',
						align: 'center',
						minWidth: 100,
					},
					{
						key: 'workingMatters',
						title: '作业事项',
						align: 'center',
						minWidth: 120,
						tooltip: true
					},
					{
						key: 'qualificationReviewDepartment',
						title: '资质审核部门',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'qualificationReviewDepartmentUser',
						title: '资质审核部门责任人',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'territorialCompetentDepartment',
						title: '属地主管部门',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'territorialCompetentDepartmentUser',
						title: '属地主管部门责任人',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'supervisionDepartment',
						title: '安全环保监督部门',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'supervisionDepartmentUser',
						title: '安全环保监督部门责任人',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'businessCompetentDepartment',
						title: '业务主管部门',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'businessCompetentDepartmentUser',
						title: '业务主管部门责任人',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'startTime',
						title: '开始时间',
						align: 'center',
						minWidth: 120,
						render: this.renderCellDate
					},
					{
						key: 'playEndTime',
						title: '计划结束时间',
						align: 'center',
						minWidth: 120,
						render: this.renderCellDate
					},
					{
						key: 'ifHazardousWork',
						title: '是否涉及危险作业',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'hazardousWorkItemName',
						title: '危险作业项目',
						align: 'center',
						minWidth: 120,
						tooltip: true
					},
					{
						key: 'ifSupervisor',
						title: '是否涉及监理单位',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'supervisorName',
						title: '监理单位名称',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'ifResident',
						title: '是否住场',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'ifApprove',
						title: '是否企业已审批',
						align: 'center',
						minWidth: 120,
						render: (h, params) => {
							return h('span', params.row.ifApprove == '0' ? '未审批' : params.row.ifApprove == '1' ?
								'审批中' : params.row.ifApprove == '2' ? '已审批' : '')
						}
					},
					{
						key: 'reasonsDismissal',
						title: '清退理由',
						align: 'center',
						minWidth: 120,
						tooltip: true
					},
					{
						key: 'ifBringControl',
						title: '相关方日常检查是否纳入管理范围',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'ifJoinMeeting',
						title: '是否参加班前会议',
						align: 'center',
						minWidth: 120,
					},
					{
						key: 'ifLease',
						title: '第三方驻地是否租赁',
						align: 'center',
						minWidth: 120,
					},
					// { key:'actualFinishingDate',title: '实际完成日期',  align: 'center', minWidth: 120,  render: this.renderCellDate },
					{
						key: 'workStatus',
						title: '作业状态',
						fixed: 'left',
						align: 'center',
						minWidth: 90,
						render: (h, params) => {
							return h('span', params.row.workStatus == '3' ? '计划中' : params.row.workStatus == '0' ?
								'进行中' : params.row.workStatus == '1' ? '已完成' : params.row.workStatus == '2' ?
								'延期完成' : '')
						}
					},
					{
						key: 'createDate',
						title: '填报时间',
						align: 'center',
						minWidth: 120,
						render: this.renderCellDate
					},
					{
						key: 'belongOrgName',
						title: '所属二级集团',
						align: 'center',
						minWidth: 180,
					},
				],
				evaluationPerfVisible: false,
				evaluationPerfInfo: [],
				evaluationPerfColumns: [{
						title: '序号',
						width: 65,
						fixed: 'left',
						align: 'center',
						render: (h, params) => {
							return h('span', params.index + (this.pagedata1.currentPage - 1) * this.pagedata1
								.pageSize + 1);
						}
					},
					{
						width: 200,
						minWidth: 150,
						title: '服务名称',
						align: 'center',
						key: 'serviceName',
						tooltip: true
					},
					{
						width: 150,
						title: '相关方名称',
						align: 'center',
						key: 'contractorName',
					},
					{
						width: 200,
						minWidth: 150,
						title: '所属单位',
						align: 'center',
						key: 'companyName',
					},
					{
						width: 200,
						minWidth: 150,
						title: '联系人',
						align: 'center',
						key: 'contacts',
					},
					{
						width: 200,
						minWidth: 150,
						title: '联系电话',
						align: 'center',
						key: 'phone',
					},
					{
						width: 200,
						minWidth: 150,
						title: '供方资质',
						align: 'center',
						key: 'supplierQualification',
					},
					{
						minWidth: 300,
						title: '合同有效期',
						align: 'center',
						key: 'contractTermDate',
						render: (h, params) => {
							let contractTermDateStart = new Date(params.row.contractTermStart);
							let contractTermDateEnd = new Date(params.row.contractTermEnd);
							return h('span', contractTermDateStart.getFullYear() + '/' + (contractTermDateStart
									.getMonth() + 1) + '/' + contractTermDateStart.getDate() + ' ~ ' +
								contractTermDateEnd.getFullYear() + '/' + (contractTermDateEnd.getMonth() +
								1) + '/' + contractTermDateEnd.getDate())
						}
					},
					{
						minWidth: 300,
						title: '评价时间段',
						align: 'center',
						key: 'contractTermDate',
						render: (h, params) => {
							let contractTermDateStart = new Date(params.row.evaluationPeriodStart);
							let contractTermDateEnd = new Date(params.row.evaluationPeriodEnd);
							return h('span', contractTermDateStart.getFullYear() + '/' + (contractTermDateStart
									.getMonth() + 1) + '/' + contractTermDateStart.getDate() + ' ~ ' +
								contractTermDateEnd.getFullYear() + '/' + (contractTermDateEnd.getMonth() +
								1) + '/' + contractTermDateEnd.getDate())
						}
					},
					{
						minWidth: 100,
						title: '评价人',
						align: 'center',
						key: 'userName',
					},
					{
						minWidth: 100,
						title: '评价等级',
						align: 'center',
						key: 'evaluationGrade',
					},
				],

			}
		},
		mounted() {
			// this.setTableHeight();
			this.tableHeight = 300
			this.query();
		},
		methods: {
			...pageCommonFunction,

			queryEvaluationPerf() {
				this.pagedata1.loading = true
				let orgId = this.currentUser.companyId
				if (this.dataToQuery.companyId) {
					orgId = this.dataToQuery.companyId
				}
				let data = {
					startPage: this.pagedata1.currentPage,
					size: this.pagedata1.pageSize,
					orgId: orgId,
					evaluationGrade: this.echartsName
				}
				this.modalTitle = '相关方业绩评价(' + this.echartsName + ')'
				this.$http.get(Api.interestedPartiesEvaluatePrefList, {
					params: data
				}).then((res) => {
					this.evaluationPerfInfo = res.data.data.data;
					this.pagedata1.total = res.data.data.totalSize;
					this.pagedata1.loading = false;
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pagedata1.loading = false
				})
			},
			queryPartiesBook() {
				this.pagedata1.loading = true
				let modalTitle1 = '正在作业相关方'
				let map = {}
				switch(this.echartsName){
					case '涉及危险作业':
						map.workStatus = '0'
					  map.ifHazardousWork = '是'
						break;
					case '涉及监理单位':
						map.workStatus = '0'
					  map.ifSupervisor = '是'
						break;	
					case '涉及驻场':
					  map.workStatus = '0'
					  map.ifResident = '是'
						break;  
					case '同时涉及':
					  map.workStatus = '0'
					  map.ifHazardousWork = '是'
					  map.ifSupervisor = '是'
					  map.ifResident = '是'
						break;
					case '已评价':
					  modalTitle1 = '相关方作业'
					  map.type = 'perf'
						break;
				  case '未评价':
						modalTitle1 = '相关方作业'
				    map.type = 'noPerf'
				  	break;
					case '1-3月':
						modalTitle1 = '相关方作业'
					  map.monthAll = this.arrayToInFormat([1,2,3])
						break;
					case '4-6月':
						modalTitle1 = '相关方作业'
					  map.monthAll = this.arrayToInFormat([4,5,6])
						break;
					case '7-9月':
						modalTitle1 = '相关方作业'
					  map.monthAll = this.arrayToInFormat([7,8,9])
						break;
					case '10-12月':
						modalTitle1 = '相关方作业'
					  map.monthAll = this.arrayToInFormat([10,11,12])
						break;
					
				}
			 let data = {
					startPage: this.pagedata1.currentPage,
					size: this.pagedata1.pageSize,
					conditions: {
						companyId: this.dataToQuery.companyId,
						...map
					}
				};
				this.modalTitle = modalTitle1 + '(' + this.echartsName + ')'

				this.$http.post(Api.queryWorkingRelatedRarties, data).then((res) => {
					if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
					this.partiesBookInfo = res.data.data.data;
					this.pagedata1.total = res.data.data.totalSize;
					this.pagedata1.loading = false
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pageStatus1.loading = false
				})
			},
			pageChange1(pageNum) {
				this.pagedata1.currentPage = pageNum;
				this.queryModel();
			},
			pageSizeChange1(pageSize) {
			 this.pagedata1.pageSize = pageSize;
				this.queryModel();
			},
			queryModel() {
				if (this.partiesBookVisible) {
					this.queryPartiesBook()
				} else {
					this.queryEvaluationPerf()
				}
			},

			query() {
				if (this.dataToQuery.companyId) {
					this.dataToQuery.orgId = this.dataToQuery.companyId
				} else {
					this.dataToQuery.orgId = this.currentUser.companyId
				}
				this.queryAjax();
			},
			queryAjax() {
				this.pageStatus.loading = true
				let data = {
					startPage: this.pagedata.currentPage,
					size: this.pagedata.pageSize,
					conditions: this.dataToQuery
				};
				let container1 = echarts.init(this.$refs.echart1);
				let seriesRadius = {radius: ['40%', '70%']}
				let container2 = echarts.init(this.$refs.echart2);
				let container3 = echarts.init(this.$refs.echart3);
				let container4 = echarts.init(this.$refs.echart4);

				this.$http.post(this.queryUrl, data).then((res) => {
					if (res.data.status === 201) {
						this.$Message.error(res.data.msg);
					}
					if (res.data.status === 200) {
						// this.dataTable = res.data.data.data;
						// this.pagedata.total = res.data.data.totalSize;
						this.pageStatus.loading = false
						this.dataMap = res.data.data.dataMap;
						this.dataMap.problemPercent = this.dataMap.checkProblemNum == 0 ? 0 : 
						                              this.NumberDiv(this.NumberMul(this.dataMap.rectificationNum, 100), this.dataMap.checkProblemNum, 2)
						let option1 = this.getOption1(this.dataMap.lineDescList,this.dataMap.lineCountList,'正在作业');
						container1.setOption(option1);
						container1.on('click', (param) => {
							this.partiesBookVisible = true
							this.evaluationPerfVisible = false
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container1.resize;

						let option2 = this.getOption2(this.dataMap.evaluationLevel,'相关方评价',seriesRadius);
						container2.setOption(option2);
						container2.on('click', (param) => {
							this.partiesBookVisible = false
							this.evaluationPerfVisible = true
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container2.resize;
						
						let option3 = this.getOption2(this.dataMap.workEvaluationList,'作业评价占比');
						container3.setOption(option3);
						container3.on('click', (param) => {
							this.partiesBookVisible = true
							this.evaluationPerfVisible = false
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container3.resize;
						
						let option4 = this.getOption1(this.dataMap.lineMonthDescList,this.dataMap.lineMonthCountList,'作业时间段占比');
						container4.setOption(option4);
						container4.on('click', (param) => {
							this.partiesBookVisible = true
							this.evaluationPerfVisible = false
							this.modelVisible = true
							event.stopPropagation() // 阻止冒泡
							this.echartsName = param.name;
							this.queryModel()
						});
						window.onresize = container4.resize;
					}
				}).catch(e => {
					this.$Message.error("数据获取失败")
					this.pageStatus.loading = false
				})
			},
			getOption2(data,titleText,seriesRadius) {
				return {
					title: {
						text: titleText,
						textStyle: {
							fontSize: 14
						},
						left: 'center'
					},
					tooltip: {
						show: true,
					},
					legend: {
						icon: "circle",
						orient: 'vertical',
						right: '15%',
						y: "center",
						type: 'scroll',
						itemHeight: 18,
						tooltip: {
							show: true
						},
						formatter: function(name) {
							let total = 0;
							let target;
							for (let i = 0; i < data.length; i++) {
								total += data[i].value;
								if (data[i].name == name) {
									target = data[i].value;
								}
							}
							if (!target) {
								target = 0;
							}
							let percentage = 0
							if (total) {
								percentage = ((target / total) * 100).toFixed(2) + '%';
							}
							return name + '  ' + target + '  ' + percentage;
						},
					},
					color: ['#42A5F5', '#4CD1A8', '#FFC310', '#FD5C50'],
					series: [{
						// name: '承包商评价',
						type: 'pie',
						// radius: ['40%', '70%'],
						...seriesRadius,
						center: ["25%", "50%"],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 8,
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: false,
							}
						},
						labelLine: {
							show: false
						},
						data: data
					}]
				};
			},
			getOption1(lineDescList,lineCountList,titleText) {
				return {
					title: {
						text: titleText,
						textStyle: {
							fontSize: 14,
						},
						left: 'center'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					// legend: {
					//     data: ['正在作业']
					// },
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						// data: ["涉及危险作业", "涉及监理单位", "涉及驻场", "同时涉及"],
						data: lineDescList,
						axisLabel: {
							show: true,
							interval: 0,
						},
					}],
					yAxis: [{
						type: 'value',
					}],
					color: ['#42A5F5'],
					series: [{
						name: titleText,
						type: 'bar',
						// barWidth : 30,
						barGap: "1%",
						label: {
							show: true,
						},
						itemStyle: {
							barBorderRadius: [4, 4, 0, 0],
						},
						data: lineCountList,
					}]
				}
			},
		},
		watch: {
			'dataTable': function() {
			}
		},
	}
</script>

<style lang='css' scoped>
	.ivu-form-item {
		padding-right: 20px;
	}

	.query-form-el,
	.ivu-date-picker,
	.ivu-input-wrapper {
		width: 100%;
	}

	.statistics-card {
		width: 100%;
		height: 112px;

	}

	#statistics-card-1 {
		background-image: url('../../../assets/bbmg/backgroundImage/red_mini.png');
		background-repeat: no-repeat;
		background-position: -16px, -10%;
		background-size: 112%, 112%;
	}

	#statistics-card-2 {
		background-image: url('../../../assets/bbmg/backgroundImage/yellow_mini.png');
		background-repeat: no-repeat;
		background-position: -16px, -10%;
		background-size: 112%, 112%;
	}

	#statistics-card-3 {
		background-image: url('../../../assets/bbmg/backgroundImage/blue_mini.png');
		background-repeat: no-repeat;
		background-position: -16px, -10%;
		background-size: 112%, 112%;
	}

	#statistics-card-4 {
		background-image: url('../../../assets/bbmg/backgroundImage/green_mini.png');
		background-repeat: no-repeat;
		background-position: -16px, -10%;
		background-size: 112%, 112%;
	}

	.statistics-text-title {
		font-size: 18px;
		font-family: HiraginoSansGB-W6;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 27px;
		text-align: left;
		letter-spacing: 1px;
	}

	.statistcs-text-a {
		color: #FFFFFF;
	}

	.statistcs-text-a:hover {
		color: #f3f2f2;
	}

	.statistics-text-content {
		font-size: 18px;
		font-family: HiraginoSansGB;
		font-weight: normal;
		color: #FFFFFF;
		text-align: right;
		line-height: 27px;
		letter-spacing: 1px;
	}

	>>>.ivu-progress-bg {
		background-color: #FFFFFF;
	}

	>>>.ivu-progress-inner {
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 4px;
	}

	p {
		display: inline-block;
		font-size: 18px;
	}

	.p-title {
		display: inline-block;
		line-height: 27px;
		font-size: 18px;
		height: 27px;
		color: red;
	}
</style>
